<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind ：</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.active{
				border: 1px red solid;
			}
		</style>
	</head>
	<body>
		<!-- v-bind 简写为  :   (冒号) -->
		<div id="app">
			<img v-bind:src="imgSrc" v-bind:title="imgTitle"/>
			<br />
			<img :src="imgSrc" :title="imgTitle+'123'"  :class="isActive? 'active': ''" @click="togleActive"/>
			<br />
			<img :src="imgSrc" :title="imgTitle+'123'"  :class="{active : isActive}" @click="togleActive"/>
			
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					imgSrc: "img/u=697401579,323262224&fm=11&gp=0.jpg",
					imgTitle: "美女",
					isActive: false,
					
				},
				methods:{
					togleActive:function(){
						this.isActive = !this.isActive;
					}
				}
			})
		</script>
		
	</body>
</html>
